import { FC, ReactNode, UIEventHandler } from 'react'
import './ScrollBehavior.less'
import { jieliuUtil } from '@/util/util'
type TScrollBehavior = {
  children: ReactNode
  height?: string
  offset?: number
  callback: (start: boolean) => void
}
const ScrollBehavior: FC<TScrollBehavior> = ({ children, height, offset, callback }) => {
  const offsetNow = offset ?? 0
  const Scroll: UIEventHandler<HTMLDivElement> = e => {
    // console.log(e.currentTarget.scrollTop)
    // console.log(e.currentTarget.scrollHeight)
    // console.log(e.currentTarget.getBoundingClientRect().height + e.currentTarget.scrollTop)
    const currentTarget = e.currentTarget
    jieliuUtil(() => {
      const scrollBottom = currentTarget.scrollHeight >= currentTarget.getBoundingClientRect().height + currentTarget.scrollTop - offsetNow
      callback && callback(scrollBottom)
    }, 500)
  }
  return (
    <div className="scrollBehavior" style={{ height }} onScroll={Scroll}>
      {children}
    </div>
  )
}
export default ScrollBehavior
